<template>
    <view class="pb-180">
        <image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
            mode="aspectFill">
        </image>
        <u-navbar title="土壤检测单" :autoBack="true" leftIconColor="#fff" bgColor="transparent" :titleStyle="{ color: '#fff' }"
            safeAreaInsetTop placeholder></u-navbar>
        <!-- 任务信息 -->
        <view class="w-710 mgt bgff pl-32 pr-32 br-20 pb-20 pt-20">
            <view class="">任务信息</view>
            <view class="rowsb rowsm h-104" style="border-bottom: 2rpx solid #f1f1f1;">
                <view>任务名称</view>
                <input class="trt fs-28" placeholder="请输入" v-model="formData.instanceName" />
            </view>
            <view class="rowsb rowsm h-104" style="border-bottom: 2rpx solid #f1f1f1;">
                <view>任务下发机构</view>
                <input class="trt fs-28" placeholder="请输入" v-model="inputDeptName" />
            </view>
            <view class="rowsl" style="border-bottom: 2rpx solid #f1f1f1;">
                <view class="mb-20 mt-20">任务路径</view>
                <view>{{ formData.path }}</view>
            </view>
        </view>
        <view class="w-710 mgt  pl-32 pr-32 br-20">
            <view class="fs-28 fw-b">检测单列表</view>
        </view>
        <view class="w-710 mgt bgff pl-32 pr-32 br-20 pb-20 pt-20" v-for="item in listData" :key="item.id">
            <view class="rows rowsm mb-10">
                <view class="label">检测编号</view>
                <view class="mr-10 ml-10">:</view>
                <view class="">{{ item.inspectionCode }}</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">抽样编号</view>
                <view class="mr-10 ml-10">:</view>
                <view>{{ item.simplingCode }}</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">监测年份</view>
                <view class="mr-10 ml-10">:</view>
                <view>{{ item.monitorYear }}</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">监测类型</view>
                <view class="mr-10 ml-10">:</view>
                <view>{{ getMonitorTypeText(item.monitorType) }}</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">任务级别</view>
                <view class="mr-10 ml-10">:</view>
                <view>{{ getLevelText(item.level) }}</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">封样状态</view>
                <view class="mr-10 ml-10">:</view>
                <view v-if="item.sealedSampleStatus === '1'">已封样</view>
                <view v-if="item.sealedSampleStatus === '0'">未封样</view>
                <view v-else>-</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">监测结果</view>
                <view class="mr-10 ml-10">:</view>
                <view v-if="item.inspectionResult === '1'">合格</view>
                <view v-if="item.inspectionResult === '2'" style="color: #f56c6c;">不合格</view>
                <view v-else>待检测</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">创建时间</view>
                <view class="mr-10 ml-10">:</view>
                <view>{{ item.createTime }}</view>
            </view>
            <view class="rows rowsm mb-10">
                <view class="label">操作</view>
                <view class="mr-10 ml-10">:</view>
                <view class="colfff bg rowsc rowsm w-200 h-64 br-16 ml-10" @click="viewDetail(item)">查看</view>
                <view class="colfff bg rowsc rowsm w-200 h-64 br-16 ml-10" @click="edit(item)">编辑</view>
            </view>
        </view>
        <view @tap="submit()" class="w-300 h-88 br-50 fixed rowsc rowsm fs-36 colfff bg"
            style="bottom: 68rpx;left: 30rpx;">
            提交
        </view>
        <view @tap="saveDraft()" class="w-300 h-88 br-50 fixed rowsc rowsm fs-36 colfff bg"
            style="bottom: 68rpx;right: 30rpx;">
            存草稿
        </view>
    </view>
</template>

<script>
import { getTask, listAll, typeSoil, levelSoil } from '@/api/soiljcd'
export default {
    data() {
        return {
            id: '',
            formData: {
                data: {
                    processVariables: {}
                }
            },
            listData: [],
            typeOptions: [],
            levelOptions: []
        }
    },
    onLoad(options) {
        this.id = options.id
        this.getInfo()
        this.getList()
        this.typeSoil()
        this.levelSoil()
    },
    methods: {
        typeSoil() {
            typeSoil().then(res => {
                this.typeOptions = res.data.map(item => ({
                    value: item.dictValue,
                    text: item.dictLabel
                }))
            })
        },
        levelSoil() {
            levelSoil().then(res => {
                this.levelOptions = res.data.map(item => ({
                    value: item.dictValue,
                    text: item.dictLabel
                }))
            })
        },
        viewDetail(item) {
            uni.navigateTo({
                url: `/pages/mydaiban/soiljcd/soiljcdDetail?id=${item.id}&view=true`
            })
        },
        edit(item) {
            uni.navigateTo({
                url: `/pages/mydaiban/soiljcd/soiljcdDetail?id=${item.id}&edit=true`
            })
        },
        // 获取检测单列表
        getList() {
            listAll({}).then(res => {
                console.log(res, '检测单列表')
                this.listData = res.data
            })
        },
        // 获取任务信息
        getInfo() {
            getTask(this.id).then(res => {
                console.log(res)
                this.formData = res.data
                this.formData.path = this.buildTaskPath(this.formData)
                console.log(this.formData.path)
            })
        },
        // 构建任务路径
        buildTaskPath(taskData) {
            try {
                const pv = taskData.data?.processVariables
                if (!pv) return '-'

                const parts = []

                // 添加任务下发机构
                if (pv.inputDeptName) {
                    parts.push(pv.inputDeptName)
                }

                // 添加市级名称
                if (pv.municipalDept?.cityName) {
                    parts.push(pv.municipalDept.cityName)
                }

                // 添加县级名称
                if (pv.countyDept?.countyName) {
                    parts.push(pv.countyDept.countyName)
                }

                return parts.length > 0 ? parts.join(' > ') : '-'
            } catch (error) {
                console.error('构建任务路径失败:', error)
                return '-'
            }
        },
        // 获取监测类型文字
        getMonitorTypeText(value) {
            if (!value) return '-'
            const option = this.typeOptions.find(item => item.value === value)
            return option ? option.text : value
        },
        // 获取任务级别文字
        getLevelText(value) {
            if (!value) return '-'
            const option = this.levelOptions.find(item => item.value === value)
            return option ? option.text : value
        },
        // 提交方法
        submit() {
            // 这里可以添加提交逻辑
            console.log('提交数据:', this.formData)
            uni.showToast({
                title: '提交成功',
                icon: 'success'
            })
        },
        // 存草稿方法
        saveDraft() {
            // 这里可以添加存草稿逻辑
            console.log('存草稿数据:', this.formData)
            uni.showToast({
                title: '草稿已保存',
                icon: 'success'
            })
        },
    },
    computed: {
        navbarHeight() {
            const systemInfo = uni.getSystemInfoSync();
            // 将px转换为rpx (1px = 2rpx)
            const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
            const navbarHeightRpx = 44 * 2; // 44px = 88rpx
            return statusBarHeightRpx + navbarHeightRpx;
        },
        inputDeptName: {
            get() {
                return this.formData.data?.processVariables?.inputDeptName || '';
            },
            set(value) {
                if (!this.formData.data) {
                    this.$set(this.formData, 'data', {});
                }
                if (!this.formData.data.processVariables) {
                    this.$set(this.formData.data, 'processVariables', {});
                }
                this.$set(this.formData.data.processVariables, 'inputDeptName', value);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    z-index: 1;
}
.label {
    white-space: nowrap;
}
</style>